<template>
  <div class="warpper-box">
    <a-form layout="inline" style="padding-left: 34px;">
      <a-form-item label="月份">
        <a-month-picker valueFormat="YYYY-MM" v-model="params.yearMonth" placeholder="选择月份"></a-month-picker>
      </a-form-item>
      <a-form-item label="平台公司">
        <a-select v-model="params.parkId" style="width: 240px;" placeholder="请选择平台公司">
          <a-select-option v-for="item in companyList" :key="item.parkId">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="合作类型">
        <a-select v-model="params.bizType" style="width: 240px;" placeholder="请选择合作类型">
          <a-select-option v-for="item in bizTypeList" :key="item.bizType">
            {{ item.bizTypeName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type='primary' @click="onSearch">查询</a-button>
        <a-button type='primary' @click="onReset">重置</a-button>
      </a-form-item>
    </a-form>
    <!-- 统计数据 -->
    <a-row type="flex" justify="space-around" style="margin-top: 20px;">
      <a-col :span="5">
        <a-card>
          <a-statistic title="客户" :value="statisticsInfo.enterpriseNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="渠道" :value="statisticsInfo.channelNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="落地服务商" :value="statisticsInfo.localServiceNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="合作人数" :value="statisticsInfo.cooperationNum" :value-style="{ color: '#3f8600' }">
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-row type="flex" justify="space-around" style="margin-top: 20px;">
      <a-col :span="5">
        <a-card>
          <a-statistic title="结算金额" :value="statisticsInfo.settleAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="服务费" :value="statisticsInfo.serviceAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="毛利润" :value="statisticsInfo.grossProfitAmount" :value-style="{ color: '#cf1322', }"
            prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="5">
        <a-card>
          <a-statistic title="应收款" :value="statisticsInfo.receivablesAmount" :value-style="{ color: '#cf1322' }"
            prefix="￥">
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <!-- echart图表 -->
    <a-row type="flex" justify="space-around" style="margin-top: 40px;">
      <a-col :span="7">
        <div id="customChart" style="width: 100%;height: 360px;"></div>
      </a-col>
      <a-col :span="7">
        <div id="channelChart" style="width: 100%;height: 360px;"></div>
      </a-col>
      <a-col :span="7">
        <div id="serviceChart" style="width: 100%;height: 360px;"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  monthComprehensive
} from "@/api/human/report"
import {
  sysListBaseInfo
} from '@/api/manage/base'
import {
  listEnterpriseBizType
} from "@/api/human/enterprise"
var nowDate = new Date(); // 当前时间
export default {
  name: "compositeEcharts",
  data() {
    return {
      params: {
        yearMonth: nowDate.getFullYear() + "-" + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1)),
        parkId: undefined,
        bizType: undefined
      },
      companyList: [], // 平台公司列表
      bizTypeList: [], // 合作类型列表

      statisticsInfo: {}, // 统计数据
      customList: [], // 客户数量数据
      channelList: [], // 渠道数量数据
      serviceList: [], // 服务商数量数据
    };
  },
  activated() {
    this.getData();
    this.getSysListBaseInfo();
    this.getBizTypeList();
  },
  methods: {
    // 获取月度综合统计数据
    async getData() {
      const { code, data } = await monthComprehensive(this.params);
      if (code === '1') {
        this.statisticsInfo = data;
        this.customList = data.enterpriseStatistics;
        this.channelList = data.channelStatistics;
        this.serviceList = data.localServiceStatistics;
        this.initEchart();
      }
    },
    // 获取所有平台基础信息
    async getSysListBaseInfo() {
      const {
        code,
        data
      } = await sysListBaseInfo();
      if (code == "1") {
        this.companyList = data;
      }
    },
    // 获取所有合作类型信息
    async getBizTypeList() {
      const {
        code,
        data
      } = await listEnterpriseBizType();
      if (code == "1") {
        this.bizTypeList = data;
      }
    },
    // 初始化echarts
    initEchart() {
      this.initEchartCustom();
      this.initEchartChannel();
      this.initEchartService();
    },
    // 客户数量
    initEchartCustom() {
      const myChart = echarts.init(document.getElementById("customChart"));
      let xData = this.customList.map(item => item.x);
      let yData = this.customList.map(item => item.y);
      let option = {
        backgroundColor: "#fff",
        title: {
          text: `{a|客户数量}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: '2%',
        },
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255)',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A7D6FF'
                }, {
                  offset: 0.5,
                  color: '#fff',
                }, {
                  offset: 1,
                  color: '#A7D6FF'
                }],
                global: false
              }
            },
          }
        },
        grid: {
          top: '13%',
          left: '9%',
          right: '8%',
          bottom: '12%',
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              show: false // 是否显示坐标轴轴线
            },
            axisLabel: {
              color: '#282828',
              fontSize: 14,
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。
              show: true,
              inside: false,
              lineStyle: {
                color: '#000'
              }
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 6,
            splitLine: { show: true },
            axisLabel: { //坐标轴刻度标签的相关设置。
              show: true,
              textStyle: {
                color: '#737373',
                fontSize: 14,
              }
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
              }
            },
            show: true,
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666",
                fontSize: 14,
              }
            }
          }
        ],
        series: [
          {
            name: '客户数量',
            type: 'bar',
            barMaxWidth: '20%',
            zlevel: 10,
            // barGap: '100%',
            data: yData,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#4F93FE'
                  }, {
                    offset: 1,
                    color: '#A7D6FF'
                  }]
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#3b6ebf',
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              }
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 渠道数量
    initEchartChannel() {
      const myChart = echarts.init(document.getElementById("channelChart"));
      let xData = this.channelList.map(item => item.x);
      let yData = this.channelList.map(item => item.y);
      let option = {
        backgroundColor: "#fff",
        title: {
          text: `{a|渠道数量}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: '2%',
        },
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255)',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A7D6FF'
                }, {
                  offset: 0.5,
                  color: '#fff',
                }, {
                  offset: 1,
                  color: '#A7D6FF'
                }],
                global: false
              }
            },
          }
        },
        grid: {
          top: '13%',
          left: '9%',
          right: '8%',
          bottom: '12%',
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              show: false // 是否显示坐标轴轴线
            },
            axisLabel: {
              color: '#282828',
              fontSize: 14,
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。
              show: true,
              inside: false,
              lineStyle: {
                color: '#000'
              }
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 6,
            splitLine: { show: true },
            axisLabel: { //坐标轴刻度标签的相关设置。
              show: true,
              textStyle: {
                color: '#737373',
                fontSize: 14,
              }
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
              }
            },
            show: true,
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666",
                fontSize: 14,
              }
            }
          }
        ],
        series: [
          {
            name: '渠道数量',
            type: 'bar',
            barMaxWidth: '20%',
            zlevel: 10,
            // barGap: '100%',
            data: yData,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#4F93FE'
                  }, {
                    offset: 1,
                    color: '#A7D6FF'
                  }]
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#3b6ebf',
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              }
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 落地服务商数量
    initEchartService() {
      const myChart = echarts.init(document.getElementById("serviceChart"));
      let xData = this.serviceList.map(item => item.x);
      let yData = this.serviceList.map(item => item.y);
      let option = {
        backgroundColor: "#fff",
        title: {
          text: `{a|落地服务商数量}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: '2%',
        },
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255)',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A7D6FF'
                }, {
                  offset: 0.5,
                  color: '#fff',
                }, {
                  offset: 1,
                  color: '#A7D6FF'
                }],
                global: false
              }
            },
          }
        },
        grid: {
          top: '13%',
          left: '9%',
          right: '8%',
          bottom: '12%',
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              show: false // 是否显示坐标轴轴线
            },
            axisLabel: {
              color: '#282828',
              fontSize: 14,
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。
              show: true,
              inside: false,
              lineStyle: {
                color: '#000'
              }
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 6,
            splitLine: { show: true },
            axisLabel: { //坐标轴刻度标签的相关设置。
              show: true,
              textStyle: {
                color: '#737373',
                fontSize: 14,
              }
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(131,101,101,0.2)',
                type: 'dashed',
              }
            },
            show: true,
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666",
                fontSize: 14,
              }
            }
          }
        ],
        series: [
          {
            name: '落地服务商数量',
            type: 'bar',
            barMaxWidth: '20%',
            zlevel: 10,
            // barGap: '100%',
            data: yData,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#4F93FE'
                  }, {
                    offset: 1,
                    color: '#A7D6FF'
                  }]
                },
                barBorderRadius: [30, 30, 0, 0],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#3b6ebf',
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              }
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 搜索
    onSearch() {
      this.getData();
    },
    // 重置
    onReset() {
      this.params.yearMonth = nowDate.getFullYear() + "-" + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1));
      this.params.parkId = undefined;
      this.params.bizType = undefined;
      this.getData();
    }
  }
};
</script>

<style lang="less" scoped></style>
